<template>
  <div>
    <el-input placeholder="请输入文字搜索地点" v-model="searchText" @input="searchInput"></el-input>
    <!-- // 附近地点显示 -->

    <el-table
      v-loading="nearList.length==0"
      size="mini"
      :data="nearList"
      max-height="300"
      style="width: 100%">
      <el-table-column
        prop="title"
        size="mini"
        label="附近地点名称">
      </el-table-column>
      <el-table-column
        fixed="right"
        size="mini"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="selectAddress(scope.row)"
            type="text"
            size="small">
            确认选择
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- // 地图显示 注意id必须要加。因为下面会指定id加载地图 -->
    <div v-if="type=='1'" id="mapContainer" style="width:100%;height:300px;"></div>
  </div>
</template>
<script>
// 引入qqmap

export default {
  data() {
    return {
      city: '',
      district: '', // 区别
      ip: '',
      Lat: '0',
      Lng: '0',
      myMap: '',
      nearList: [],
      searchText: '',
    };
  },
  props: {
    type: {
      default: '1',
      type: String,
    },
  },
  mounted() {
    this.locate();
  },
  methods: {
    // 选择地址时间
    selectAddress(row) {
      this.$emit("on-select", row);
    },
    // 父组件调用显示抽屉的方法
    show() {
      this.initMap();
      this.showStatus = true;
    },
    // 获取用户IP地址
    locate() {
      // https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=KFEBZ-VES6K-WDJJ4-AJCBJ-X7YXS-RMBH7
      // 获取用户的ip地址
      // 安装qqmap插件?
      // 引入https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=密匙
      // eslint-disable-next-line no-undef
      const ipLocation = new TMap.service.IPLocation();// 新建一个IP定位类
      const params = {};//  // 未给定ip地址则默认使用请求端的ip
      ipLocation.locate(params)
        .then((result2) => {
          this.lat = result2.result.location.lat;
          this.lng = result2.result.location.lng;
          this.city = result2.result.ad_info.city;
          this.district = result2.result.ad_info.district;
          this.ip = result2.ip;
          setTimeout(() => {
            if (this.type === '1') {
              this.initMap(this.lat, this.lng);// 初始化地图
              setTimeout(() => {
                this.searchAdd(this.lat, this.lng);// 附近热门地点搜索
              });
            }
            if (this.type === '2') {
              setTimeout(() => {
                this.searchAdd(this.lat, this.lng);// 附近热门地点搜索
              });
            }
          }, 200);
        })
        .catch((error) => {
          console.log('获取IPerror', error);
          this.$message.error('获取地址失败，请尝试搜索！');
        });
    },
    // 获取完成后定位中心点
    initMap(lat, lng) {
      // 定义地图中心点坐标
      const center = new TMap.LatLng(lat, lng);
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      this.myMap = new TMap.Map('mapContainer', {
        center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });
    },
    // 搜索附近高热地点
    searchAdd(lat, lng) {
      const search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
      const center = new TMap.LatLng(lat, lng);
      const radius = 1000;
      search.explore({
        center,
        radius,
      }).then((res) => {
        this.nearList = res.data;
      });
    },
    // 搜索提示
    searchInput() {
      const suggest = new TMap.service.Suggestion({
        // 新建一个关键字输入提示类
        pageSize: 10, // 返回结果每页条目数
        region: this.city, // 限制城市范围
        regionFix: true, // 搜索无结果时是否固定在当前城市
      });
      if (this.searchText !== '') {
        const center = new TMap.LatLng(this.lat, this.lng);
        suggest
          .getSuggestions({ keyword: this.searchText, location: center })
          .then((result) => {
            // 以当前所输入关键字获取输入提示
            this.nearList = result.data;
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },

  },
};
</script>

<style scoped>
.myloading{
  height:200px;
}
</style>
